<template>
    <block v-if="scene == 1154">
    	<pyq-open-chunk></pyq-open-chunk>
    </block>
    <block v-else>
        <view class="vrPages bg-fff">
            <view class="houseItem">
                <view class="houseTitle flex" @click="navTo">
                    <view class="leftLogo">
                        <image :src="image_list && image_list.length > 0 ? image_list[0].url : ''" mode="aspectFill"></image>
                    </view>
                    <view class="rightTitle flex">
                        <view class="nameBox flex">
                            <view class="title">{{product_title}}</view>
                            <view>
                                <text class="item">视频看房</text>
                            </view>
                        </view>
                        <view class="priceBox">
                            <block v-if="price">
                                <text class="price"><text class="fontNum">{{price}}</text>元/m²</text>
                                <text class="line">|</text>
                            </block>
                            <block v-else-if="amount">
                                <text class="price fontNum">{{amount}}</text>
                                <text class="line">|</text>
                            </block>
                            <text class="area">{{area}}</text>
                            <text class="jiedao" v-if="street">{{street}}</text>
                        </view>
                    </view>
                </view>
                <view class="houseType">
                    {{title}}
                </view>
                <!--#ifdef MP-WEIXIN || MP-TOUTIAO-->
                <video :src="videoUrl" :title="title" autoplay
                       @error="videoErrorCallback" controls></video>
                <!--#endif-->
                <!--#ifdef MP-BAIDU-->
                <video :src="videoUrl" :title="title" autoplay
                       :poster="image.length > 0 ? image[0].url : image_list[0].url"
                       @error="videoErrorCallback" controls></video>
                <!--#endif-->
            </view>
			<bind-seller-bottom-bar :detail="recommendAdviser" v-if="recommendAdviser&&recommendAdviser.avatar_url"></bind-seller-bottom-bar>
        </view>
    </block>
</template>

<script>
	import { mapState, mapActions } from 'pinia';
	import { useConfigStore, useUserInfoStore } from '@/store/index';
    import { vidToUrl } from '@/common/common';
	import { playVideoAPI } from "@/common/api";
    // import { dispatchClient } from '@/common/api-adviser';
    // import { getSellerInfoById } from '@/common/api/adviser';

	export default {
		data() {
			return {
				videoId: '',
				image: [],
				image_list: [],
				title: '',
                share: false,
				product_title: '',
				product_id: '',
				price: null,
				amount: null,
				area: '',
				street: null,
				videoUrl: '',
                recommendAdviser: {}
			}
		},
		onLoad(options) {
            let { videoId='', puid='', share=false, title='', productId='' } = options;
            
            //朋友圈进入小程序快照场景
            if(this.scene == 1154) return;
            
            if(puid) {
                this.setPuid(puid)
            }
			this.productId = productId && productId != 'undefined' ? productId : '';
			this.videoId = videoId;
            this.title = title;
            this.share = JSON.parse(share);
			let that = this;
			uni.$check_and_login(function () {
				that.init()
			})
		},
		computed:{
			...mapState(useConfigStore, ['scene', 'puid']),
			...mapState(useUserInfoStore, ['userInfo'])
		},
		onShareAppMessage(res) {
			return {
				title: `${this.title}户型全景实拍，快来围观`,
				path: `/pages/product/video/play?videoId=${this.videoId}&puid=${this.userInfo.id}&share=true&title=${this.title}&prepage=楼盘视频播放页-${this.videoId}-${this.title}`,
			}
		},
        //#ifdef MP-WEIXIN
        onShareTimeline() {
            return {
                title: `${this.title}户型全景实拍，快来围观`,
                query: `videoId=${this.videoId}&puid=${this.userInfo.id}&share=true&title=${this.title}&prepage=楼盘视频播放页-${this.videoId}-${this.title}`
            }
        },
        //#endif
		methods: {
			...mapActions(useConfigStore, ['setPuid']),

			async init() {
				//绑定客户
				try {
					// await dispatchClient({
					// 	share: this.share,
					// 	puid: this.puid,
					// 	pid: this.product_id
					// });

					// //根据顾问ID获取被绑定的顾问信息
					// if(this.puid && this.puid !== this.userInfo.id) {
                    //     let sellInfoRes = await getSellerInfoById({id: this.puid, productId: this.product_id});
					// 	if(sellInfoRes.status === 0) {
                    //         if(sellInfoRes.detail.product_id && sellInfoRes.detail.product_id == this.product_id) {
					// 			this.recommendAdviser = sellInfoRes.detail;
					// 		}
					// 	}
					// }

					this.getVideos();
				} catch (error) {}
			},

			//获取视频
			getVideos(){
				uni.showLoading({
					title: '数据加载中',
					mask: true
				})
				playVideoAPI(this.videoId).then(res => {
					if(res.status == 0){
						const that = this;
						let {id, product, image_list, title, product_title, price, amount, area, street, url} = res.detail;
						this.videoId = id;
						this.product_id = product;
						this.image_list = image_list;
						this.title = title;
						this.product_title = product_title;
						this.price = price;
						this.amount = amount;
						this.area = area;
						this.street = street;
						vidToUrl(url).then(url_ => {
							that.videoUrl =  url_
						})
					}else{
						uni.$u.toast(res.detail);
					}
					uni.hideLoading();
				}).catch(err => {
					uni.hideLoading();
					uni.$u.toast(res.detail)
				})
			},
			
			//视频播放失败
			videoErrorCallback: function(e) {
				uni.showModal({
					content: e.target.errMsg,
					showCancel: false
				})
			},
			navTo(){
				uni.navigateTo({
					url: `/pages/product/detail/index?productId=${this.product_id}&puid=${this.puid}&title=${this.title}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.vrPages{
		height: 100vh;
        overflow: hidden;
		padding: 0rpx 30rpx;
		.houseItem{
			margin-top: 60rpx;
			video{
				width: 100%;
				height: 378.5rpx;
			}
			.houseTitle{
				.leftLogo{
					width: 90rpx;
					height: 90rpx;
					border-radius: 50%;
					overflow: hidden;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.rightTitle{
					flex-direction: column;
					align-items: flex-start;
					width: calc(100% - 80rpx);
					padding-left: 20rpx;
					.nameBox{
						line-height: 1;
						display: flex;
						justify-content: space-between;
						.title{
							font-size: 32rpx;
							font-weight: bold;
							margin-right: 20rpx;
						}
						.item{
							margin-right: 20rpx;
							padding: 8rpx 14rpx;
							background-color: #F3F4F8;
							color: #878B8E;
							font-size: 24rpx;
						}
						.active{
							background-color: #677ECE;
							color: #FFFFFF;
						}
					}
					.priceBox{
						line-height: 1;
						margin-top: 14rpx;
						.price{
							color: #E04C1F;
							text{
								font-weight: bold;
								font-size: 36rpx;
							}
							margin-right: 10rpx;
						}
						.line{
							font-size: 18rpx;
							font-weight: 100;
							margin-right: 10rpx;
						}
						.area{
							color: #7E7F83;
							margin-right: 20rpx;
						}
						.jiedao{
							color: #7E7F83;
						}
					}
				}
			}
			.houseType{
				font-size: 30rpx;
				margin: 20rpx 0rpx;
				.price{
					margin-left: 10rpx;
				}
				.typePrice{
					color: #E04C1F;
				}
			}
			.houseImg{
				height: 370rpx;
				overflow: hidden;
				background-repeat: no-repeat;
				background-position: center;
				background-size: cover;
				.ipang-vr{
					width: 150rpx;
					height: 150rpx;
					line-height: 150rpx;
					text-align: center;
					border-radius: 50%;
					background-color: rgba(0,0,0,.4);
					font-size: 80rpx;
					color: #FFFFFF;
				}
			}
		}

	}
</style>
